<?php
	require_once("../conexion/conexion.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Formulario Busqueda</title>
<link href="../Estilos/global.css" rel="stylesheet" type="text/css" />
<link href="../Estilos/local.css" rel="stylesheet" type="text/css" />
<link href="../Estilos/CssTabla3.css" rel="stylesheet" type="text/css" />
<link type="text/css" href="../Estilos/autocompletar.css" rel="stylesheet" />

<script src="../include_js/popcalendar.js" type="text/javascript"></script>
<script src="../include_js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="../include_js/jquery-ui-1.8.15.custom.min.js"></script>

<script>
function Borrar(e,txt) { 

    tecla = (document.all) ? e.keyCode : e.which;
    if (tecla==8)
	{ //Tecla de retroceso (para poder borrar) 
		document.getElementById('txtCodigo').value = '';
	}
	else
	{
		document.getElementById('txtCodigo').value = '';
	}
}

$(document).ready(function()
{ 
	$('#txtProducto').autocomplete({
		source:'Autocompletar_Producto.php',
		select: function(event,ui){
		
			document.getElementById('txtProducto').value = ui.item.value;
			document.getElementById('txtCodigo').value = ui.item.id;
		}
	});
});

</script>

</head>

<body>
<form name="form_Busqueda_fac" id="form_Busqueda_fac" method="post">
<table width="100%" border="0" cellpadding="0">
  <tr>
    <td>
	<div class='option2'><label style="font:Verdana, Arial, Helvetica, sans-serif; color:#0066CC; font-weight:bold;">Secci&oacute;n de busqueda.</label></div>
	<div class='groupbox'>
	<div id="capa" style="z-index:1;"></div>
	<table width="100%" border="0" class="tres" cellpadding="0" cellspacing="0">
  <tr style="border:1px solid #6593C0;">
    <td style="border:1px solid #6593C0;"><label style="color:#FFFFFF; font-weight:bold;">Nombre Producto</label></td>
    <td style="border:1px solid #6593C0;"><label style="color:#FFFFFF; font-weight:bold;">Fecha Desde</label></td>
    <td style="border:1px solid #6593C0;"><label style="color:#FFFFFF; font-weight:bold;">Fecha Hasta</label></td>
    <td style="border:1px solid #6593C0;">&nbsp;</td>
  </tr>
  <tr style="border:1px solid #6593C0;">
    <td width="355" style="border:1px solid #6593C0;">
	<input name="txtProducto" id="txtProducto" type="text" size="50" onkeydown="return Borrar(event,this)" onfocus="this.select()" />	</td>
    <td width="136" style="border:1px solid #6593C0;"><input name="txtFIni" type="text" id="txtFIni" size="10">&nbsp;<img src="../imagen/img.gif" width="20" height="14" title="calendario" style="cursor: pointer; border: 1px solid green;" onmouseover="this.style.background='black';" onmouseout="this.style.background=''" onclick="popUpCalendar(txtFIni, form_Busqueda_fac.txtFIni, 'dd-mm-yyyy');" /></td>
    <td width="252" style="border:1px solid #6593C0;"><input name="txtFFin" type="text" id="txtFFin" size="10">&nbsp;<img src="../imagen/img.gif" width="20" height="14" title="calendario" style="cursor: pointer; border: 1px solid green;" onmouseover="this.style.background='black';" onmouseout="this.style.background=''" onclick="popUpCalendar(txtFFin, form_Busqueda_fac.txtFFin, 'dd-mm-yyyy');" /></td>
    <td width="228" style="border:1px solid #6593C0;"><input name="btn_Buscar" id="btn_Buscar" type="button" value=" " class="buscar" /><input type="hidden" name="txtCodigo" id="txtCodigo" size="2"/></td>
  </tr>
</table>		
      </div></td>
  </tr>
</table>
</form>
<table width="100%" border="0" cellpadding="2" cellspacing="0">
  <tr>
    <td><div id="listadoBusqueda"></div></td>
  </tr>
</table>
</body>
<script>
$('#btn_Buscar').click(function() 
{ 
        $.ajax({
            type: 'POST',
            url: 'Carga_busqueda_Producto.php',
            data: $('#form_Busqueda_fac').serialize(),
            success: function(data) {
                $('#listadoBusqueda').html(data);
            }
        })
});
</script>
</html>